@import '../global/global';

.ring-island {
  @include ring-font;

  min-width: $ring-unit*25 - 2;

  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.15);
  border-radius: $ring-border-radius;

  background-color: #FFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);

  &_stack-right {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    box-shadow: none;
  }

  &_stack-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    box-shadow: none;
  }
}

.ring-island__header {
  min-height: $ring-unit*3 - 2;
  line-height: $ring-unit*3 - 2;

  border-bottom: 1px solid #B4B4B4;
  border-top-left-radius: $ring-border-radius;
  border-top-right-radius: $ring-border-radius;

  background-image: linear-gradient(to top, #EBEBEB, #FFF);
}

.ring-island__header-btn,
.ring-island__header-button {
  font-size: $ring-font-size-smaller;
  float: right;

  padding: 0 $ring-unit*2 - 1; // -1 to account for border

  cursor: pointer;
  user-select: none;

  color: #6D6D6D;
  border-left: 1px solid #B4B4B4;
  text-shadow: #FFF 0 0 1px;

  &:hover {
    background: #E1E1E1 linear-gradient(to top, #E1E1E1, #FFF);
  }

  &:active {
    background: #E4E4E4 none;
    box-shadow: 0 0 4px 0 #D3D3D3 inset;
  }

  &:last-child {
    border-top-right-radius: 3px;
  }
}

.ring-island__title {
  display: block;
  float: left;

  font-weight: bold;

  padding: 0 $ring-unit*4;
}

.ring-island__content {
  margin: $ring-unit*2 $ring-unit*4;
}
